<template>
	<view>
		<view class="res-box">
			<text class="res-time">预约时间:2024/12/01 10:00</text>
			<view class="res-con">
				<view class="jiao">快</view>
				<view class="res-top">
					<text class="res-top-l">充电中</text>
					<view class="res-top-c">
						<image src="../../static/logo.png" class="w-160 h-160  res-img flex-shrink-0"
							style="flex-shrink: 0;" mode="aspectFill">
						</image>
						<view class="res-text">
							<text class="res-title">重庆市北陪区万达公寓电桩(直流)</text>
							<view class="res-flex">
								<text>编号:AB1234567</text>
								<text>功率:7000kw</text>
							</view>
							<text>营业时间:8:00-24:00</text>
							<text>停车费:2元/小时</text>
						</view>
					</view>
				</view>
				<view class="res-c">
					<text>充电开始时间：2024.10.10 15:30</text>
					<view class="res-flex">
						<text>充电车辆：京A88T88</text>
						<text>车辆电话：13888888888</text>
					</view>
					<text>停车费：10元</text>
				</view>
				<view class="res-b">
					<image src="../../static/my/icon7.png" mode="widthFix"></image>
					实时充电数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 0,
			title: ['充电中', '完成充电', '停车中', '完成停车']
		}
	},
	onLoad: function (option) {
		if (option.node) {
			this.type = option.node
			uni.setNavigationBarTitle({
				title: this.title[option.node]
			});
		}
	},
	methods: {

	}
}
</script>

<style lang="less" scoped>
.my-content {
	width: 100%;
	box-sizing: border-box;

	.res-box {
		width: 100%;

		.res-time {
			font-size: 28upx;
			color: #A6A6A6;
			display: block;
			margin-bottom: 10upx;
		}

		.res-con {
			width: 100%;
			border-radius: 16upx;
			overflow: hidden;
			box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
			margin-bottom: 20upx;
			position: relative;

			.jiao {
				position: absolute;
				top: 10upx;
				right: 10upx;
				width: 40upx;
				height: 40upx;
				border-radius: 8upx;
				background: #FA5151;
				color: #fff;
				font-size: 24upx;
				text-align: center;
				line-height: 40upx;
			}

			.res-top {
				width: 100%;
				display: flex;

				.res-top-l {
					width: 40upx;
					background-color: #3662EC;
					font-size: 24upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
				}

				.red {
					background-color: #FA5151 !important;
				}

				.res-top-c {
					display: flex;
					align-items: center;
					width: 90%;
					padding: 10upx;
					box-sizing: border-box;

					.res-img {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10upx;

					}

					.res-text {
						.res-flex {
							display: flex;

							text {
								min-width: 200upx;
								margin-right: 40upx;
							}
						}

						.res-title {
							font-size: 28upx;
							color: #000;
						}

						text {
							display: block;
							font-size: 24upx;
							color: #9E9E9E;
						}
					}
				}
			}

			.res-c {
				width: 100%;
				padding: 10upx 20upx;
				box-sizing: border-box;
				border-top: 1px solid #D8D8D8;
				border-bottom: 1px solid #D8D8D8;

				text {
					display: block;
					font-size: 28upx;
					color: #000;
					margin-bottom: 5upx;
				}

				.res-flex {
					display: flex;
					justify-content: space-between;
				}

				.gray {
					color: #A6A6A6;
				}
			}

			.res-b {
				font-size: 36upx;
				color: #3662EC;
				font-weight: 600;
				padding: 20upx 0;
				justify-content: center;
				display: flex;
				align-items: center;

				image {
					width: 40upx;
					height: auto;
					display: block;
					margin-right: 10upx;
				}
			}

			.res-end {
				font-size: 36upx;
				color: #3662EC;
				font-weight: 600;
				text-align: center;
				padding: 10upx 0;
			}
		}
	}
}
</style>